<template>
    <div id="news">
        <div class="container">
            <!-- 1 -->
            <div class="left">
                <!-- lunbo -->
                <div class="banner">
                    <el-carousel height="215px" >
                        <el-carousel-item v-for="item in banner" :key="item.url" >
                            <img :src="item.url" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <!-- info -->
                <div class="datainfo">
                    <div class="data_title">
                        <div class="txts">
                            距离2020年考试还有
                        </div>
                        <span>1</span>
                        <span>9</span>
                        <span>5</span>
                        <div class="txts">
                            天
                        </div>
                    </div>
                </div>
                <!-- list -->
                <div class="classlist">
                    <el-timeline>
                        <el-timeline-item timestamp="考试报名" placement="top">
                            <div class="itembox">
                                <div class="item">
                                    前景分析
                                </div>
                                <div class="item">
                                    专业对照表
                                </div>
                                <div class="item">
                                    报名时间
                                </div>
                                <div class="item">
                                    报考条件
                                </div>
                            </div>
                        </el-timeline-item>
                        <el-timeline-item timestamp="准考证打印" placement="top">
                            <div class="itembox">
                                <div class="item">
                                    打印时间
                                </div>
                                <div class="item">
                                    打印入口
                                </div>
                                
                            </div>
                        </el-timeline-item>
                        <el-timeline-item timestamp="考试时间" placement="top">
                            <div class="itembox">
                                <div class="item">
                                    考试科目
                                </div>
                                <div class="item">
                                    考题大纲
                                </div>
                                <div class="item">
                                    考题教材
                                </div>
                                <div class="item">
                                    考题时间
                                </div>
                                <div class="item">
                                    题型分值
                                </div>
                                <div class="item">
                                    历年真题
                                </div>
                                <div class="item">
                                    考题资料
                                </div>
                                <div class="item">
                                    课程辅导
                                </div>
                                <div class="item">
                                    章节练习
                                </div>
                                <div class="item">
                                    每日一练
                                </div>
                            </div>
                        </el-timeline-item>
                        <el-timeline-item timestamp="成绩查询" placement="top">
                            <div class="itembox">
                                <div class="item">
                                    查询时间
                                </div>
                                <div class="item">
                                    查询入口
                                </div>
                                <div class="item">
                                    有效期限
                                </div>
                                <div class="item">
                                    管理办法
                                </div>
                                
                            </div>
                        </el-timeline-item>
                        <el-timeline-item timestamp="证书领取" placement="top">
                            <div class="itembox">
                                <div class="item">
                                    合格标准
                                </div>
                                <div class="item">
                                    领取时间
                                </div>
                                <div class="item">
                                    领取地址
                                </div>
                                <div class="item">
                                    领取流程
                                </div>
                                
                            </div>
                        </el-timeline-item>
                        <el-timeline-item timestamp="注册信息" placement="top">
                            <div class="itembox">
                                <div class="item">
                                    注册详解
                                </div>
                                <div class="item">
                                    注册管理
                                </div>
                                
                            </div>
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </div>
            <!-- 2 -->
            <div class="middle">
                <div class="news_item">
                 
                    <div class="list_item" v-for="(item, index) in newsList" :key="index">
                        <div class="tag">最新</div>
                        <div class="info">
                            {{ item.title }}
                        </div>
                    </div>

                </div>
            </div>
            <!-- 3 -->
            <div class="right">
                <div class="ke_title">
                    <div class="line"></div>
                    <div class="name">推荐课程</div>
                    <div class="more">更多</div>
                </div>
                <div class="imgbox">
                    <el-carousel height="138px">
                        <el-carousel-item v-for="item in freeList" :key="item.pic">
                            <a :href="item.link">
                                <img :src="item.pic" alt="">
                            </a>
                        </el-carousel-item>
                    </el-carousel>
                </div>

                <div class="ke_title">
                    <div class="line"></div>
                    <div class="name">题库</div>
                    <div class="more">更多</div>
                </div>
                <div class="tilist">
                    <div class="tiitem" v-for="(item, index) in tiku" :key="index">
                        <div class="left">
                            <div class="top">
                                <i :class="item.icon"></i>
                                <span>{{ item.name }}</span>
                            </div>
                            <div class="desc">
                                {{ item.desc }}
                            </div>
                        </div>
                        <div class="right">
                            做题
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script> 
    export default {
        props: {
            thenew: Object
        },
        data() {
            return {
                newsList: [],
                banner: [
                    { url: "http://www.niceloo.com/UpLoad/Picture/Advertisement/20200228/202002281011357093444586065.jpg" },
                    { url: "http://www.niceloo.com/UpLoad/Picture/Advertisement/20200305/202003050903070113583647970.jpg" },
                ],
                freeList: [],
                tiku: [
                    { icon: "el-icon-reading", name: "历年真题", desc: "提供往年历年真题" },
                    { icon: "el-icon-notebook-1", name: "智能联系", desc: "个性化智能练习" },
                    { icon: "el-icon-notebook-2", name: "模拟试卷", desc: "在线模拟考试、判分" },
                    { icon: "el-icon-time", name: "每日一练", desc: "每日随机分配10道题" },
                ]
            }
        },
        computed: {
            
            xueliid() {
                return this.$store.state.schoolData.xueliid
            },
        },
        watch: {
            xueliid() {
                this.getArtList()
                this.getKe()
            }
        },
        mounted () {
            this.getArtList();
            this.getKe()
        },
        methods: {
            // 查看文章
            showArt( id ) {
                this.$router.push(`/artical/${id}/erji`)
            },

            // 获取文章列表
            async getArtList() {
                let res = await this.$axios.post("/port/index/erlibrary", { key: this.$key, id: this.xueliid })
                // console.log(res);
                let code = res.data.code
                if (code == 200) {
                    this.newsList = res.data.data
                }
            },
            // 获取免费课
            async getKe() {
                let res = await this.$axios.post("/port/index/erclass", { key:this.$key, id: this.xueliid })
                // console.log(res);
                let code = res.data.code 
                if (code == 200) {
                    this.freeList = res.data.data
                }
            }
        },
    }
</script>

<style lang="scss" scoped>
#news {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 20px 0;
    .container {
        width: 1200px;
        box-sizing: border-box;
        padding: 10px;
        margin: 0px auto;
        display: flex;
        justify-content: space-between;
        .middle {
            width: 500px;
            padding: 20px;
            background-color: #fff;
            box-sizing: border-box;
            .news_item {
                width: 100%;
                box-sizing: border-box;
                .list_item {
                    width: 100%;
                    box-sizing: border-box;
                    display: flex;
                    margin: 10px 0;
                    .tag {
                        width: 60px;
                        text-align: center;
                        border-right: 1px solid #999;
                        color: red;
                        font-weight: bold;
                    }
                    .info {
                        flex: 1;
                        margin-left: 10px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }
        .left {
            width: 385px;
            background-color: #fff;
            .banner {
                width: 385px;
            }
            .datainfo {
                width: 100%;
                .data_title {
                    width: 100%;
                    height: 70px;
                    line-height: 70px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-bottom: 1px solid #f2f2f2;
                    span {
                        width:33px;
                        height: 33px;
                        display: block;
                        color: #fff;
                        line-height: 33px;
                        text-align: center;
                        font-size: 28px;
                        margin: 0 5px;
                        background: url("http://www.niceloo.com/Styles/V3/2019/img/nyl_bg1.png") 0 0 no-repeat;
                    }
                }
                
            }
            .classlist {
                    width: 100%;
                    padding: 10px;
                    box-sizing: border-box;
                    .itembox {
                        display: flex;
                        flex-wrap: wrap;
                        
                        background-color: #f5f5f5;
                        
                        .item{
                            width: 80px;
                            text-align: center;
                            padding: 5px 0;
                            height: 40px;
                            line-height: 40px;
                            cursor: pointer;
                        }
                    }
                }
        }
        .right {
            width: 240px;
            overflow: hidden;
            background-color: #fff;
            .ke_title {
                width: 100%;
                padding: 10px 20px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                height: 50px;
                line-height: 50px;
                .line {
                    width: 2px;
                    height: 15px;
                    background-color: #000;
                }
                .name {
                    font-size: 18px;
                    margin-left: 10px;
                    flex: 1;
                }
                .more {
                    font-size: 14px;
                    width: 40px;
                }
            }
            .imgbox {
                width: 100%;
                
                img {
                    width: 100%;
                    height: 138px;
                }
            }
            .tilist {
                width: 100%;
                .tiitem {
                    width: 100%;
                    padding: 20px;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    .left {
                        .desc {
                            font-size: 12px;
                            margin-top: 10px;
                        }
                    }
                    .right {
                        width: 120px;
                        border: 1px solid #000;
                        border-radius: 20px;
                        text-align: center;
                        padding: 3px 10px;
                    }
                }
            }
        }
    }
}
ul {
    padding: 0;
}
</style>